<!--

    Copyright (C) 2015 The Gravitee team (http://gravitee.io)

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

            http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

-->
<div class="gv-page-container">
  <a [routerLink]="['..']" class="gv-back-link"><small><< Back to scopes</small></a>
  <h1>{{scope.name}}</h1>
  <div>
    <div fxLayout="column" fxFlex="70">
      <form (keydown.enter)="false" (ngSubmit)="update()" #scopeForm="ngForm" fxLayout="column">
        <div class="gv-form-section">
          <mat-form-field appearance="outline" floatLabel="always">
            <mat-label>Key</mat-label>
            <input matInput type="text" placeholder="Key" name="key" [(ngModel)]="scope.key" disabled>
            <mat-hint>A key for your scope.</mat-hint>
          </mat-form-field>
          <mat-form-field appearance="outline" floatLabel="always">
            <mat-label>Name</mat-label>
            <input matInput type="text" placeholder="Name" name="name" [(ngModel)]="scope.name" required [readonly]="!editMode">
            <mat-hint>A name for your scope.</mat-hint>
          </mat-form-field>
          <mat-form-field appearance="outline" floatLabel="always">
            <mat-label>Description</mat-label>
            <input matInput type="text" placeholder="Description" name="description" [(ngModel)]="scope.description" required [readonly]="!editMode">
            <mat-hint>A description for your scope.</mat-hint>
          </mat-form-field>
          <div fxLayout="column">
            <mat-slide-toggle
              (change)="enableScopeDiscovery($event)"
              [checked]="isDiscovery()" [disabled]="!editMode">
              Display scope into openid discovery endpoint
            </mat-slide-toggle>
            <mat-hint style="font-size: 75%;">Enable scope to be displayed into the openid discovery endpoint under <i>/:domain/oidc/.well-known/openid-configuration</i></mat-hint>
          </div>
        </div>

        <div class="gv-form-section">
          <div class="gv-form-section-title">
            <h5>User consent</h5>
            <small>Expiry/lapsing period for consent after which the user would need to confirm that scope.</small>
            <mat-divider></mat-divider>
          </div>
          <div>
            <p fxLayout="row" style="align-items: center; font-size: 90%;">
              <mat-icon mat-list-icon>alarm</mat-icon>
              <span>Current period :&nbsp;</span>
              <span *ngIf="!scope.expiresIn" style="color: grey; font-style: italic;">No time set</span>
              <span *ngIf="scope.expiresIn">{{ getScopeExpiry() }} <button *ngIf="editMode" mat-icon-button (click)="clearExpiry()" matTooltip="Clear expiry period"><mat-icon>clear</mat-icon></button></span>
            </p>
            <div fxLayout="row" *ngIf="editMode" fxLayoutGap="20px">
              <mat-form-field appearance="outline" floatLabel="always">
                <mat-label>Duration time</mat-label>
                <input matInput type="number" placeholder="Duration time" name="expiresIn" min="0" [min]="0" [(ngModel)]="expiresIn">
                <mat-hint>The duration for the user consent.</mat-hint>
              </mat-form-field>
              <mat-form-field appearance="outline" floatLabel="always">
                <mat-label>Unit time</mat-label>
                <mat-select placeholder="Unit time" name="unitTime" [(ngModel)]="unitTime">
                  <mat-option value="seconds">SECONDS</mat-option>
                  <mat-option value="minutes">MINUTES</mat-option>
                  <mat-option value="hours">HOURS</mat-option>
                  <mat-option value="days">DAYS</mat-option>
                  <mat-option value="weeks">WEEKS</mat-option>
                  <mat-option value="months">MONTHS</mat-option>
                  <mat-option value="years">YEARS</mat-option>
                </mat-select>
                <mat-hint>Unit time for the user consent duration.</mat-hint>
              </mat-form-field>
            </div>
          </div>
        </div>

        <div fxLayout="row" class="scope-form-actions" *ngIf="editMode">
          <button mat-raised-button [disabled]="(!scopeForm.valid || scopeForm.pristine || formIsInvalid()) && !formChanged" type="submit">SAVE</button>
        </div>
      </form>

      <div class="gv-page-delete-zone" fxLayout="column" *ngIf="!scope.system && deleteMode">
        <p>This operation cannot be undone.</p>
        Scope will be deleted, clients and users will not be able to use this scope as permission access.
        <div class="gv-page-delete-button" fxLayout="row">
          <span fxFlex></span>
          <button mat-raised-button color="warn" (click)="delete($event)">DELETE</button>
        </div>
      </div>
    </div>

    <div class="gv-page-description" fxFlex>
      <h3>Manage Scope</h3>
      <div class="gv-page-description-content">
        <p>
          Scopes provide a way to limit the amount of access to a resource.
        </p>
        <p>
          For example, users or client apps may be granted <code>WRITE</code> access to restricted
          resources, or just <code>READ</code> access to public resources.
        </p>
      </div>
    </div>
  </div>
</div>

